<template>
    <div class="color-box table-form">
        <div class="table-title table-title-btn">
            <el-space wrap>
                <el-button
                    :loading="testStandardDataLoading"
                    type="primary"
                    @click="getTestStandardDocumentListFun"
                    :disabled="isEditing"
                    >导入</el-button
                >
            </el-space>
        </div>
        <el-table
            :data="testStandardData1"
            style="width: 100%"
            row-key="id"
            border
        >
            <!-- :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" -->
            <!-- <el-table-column type="selection" width="55" /> -->
            <el-table-column prop="testName" label="测试项目" min-width="60%">
            </el-table-column>
            <el-table-column
                prop="iscsCheck"
                label="是否出测试报告"
                min-width="25%"
            >
                <template #default="{ row, index }">
                    <span>{{ row.iscsCheck ? "是" : "否" }}</span>
                </template>
            </el-table-column>
            <!-- <el-table-column prop="op" label="操作" min-width="15%">
                <template #default="scope">
                    <el-button
                        type="danger"
                        size="small"
                        @click="deleteRow(scope.$index)"
                    >
                        <el-icon>
                            <Delete />
                        </el-icon>
                    </el-button>
                </template>
            </el-table-column> -->
        </el-table>
        <!-- 导入子元件数据 -->
        <el-dialog
            v-model="importTestShow"
            destroy-on-close
            title="导入测试标准"
            width="850"
        >
            <div class="import-test">
                <el-table
                    :data="testStandardData"
                    ref="multipleTableRef"
                    style="width: 100%"
                    @select="testStandardDataSelect"
                    @selection-change="testStandardDataChange"
                    border
                >
                    <el-table-column type="selection" width="55" />
                    <el-table-column prop="testName" label="编号"  show-overflow-tooltip />
                    <el-table-column prop="customerNum" label="客户"  show-overflow-tooltip />
                    <el-table-column prop="brandNum" label="品牌"  show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="frameMaterial" label="镜架材质"  show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="frameCate" label="镜架结构"  show-overflow-tooltip>
                    </el-table-column>
                </el-table>
            </div>

            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="importTestShow = false">
                        关闭
                    </el-button>
                    <el-button type="primary" @click="addTestStandard">
                        确定
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script setup>
import { useRoute, useRouter } from "vue-router";
import { ElMessage, ElMessageBox, ElNotification } from "element-plus";
import {
    ref,
    reactive,
    onMounted,
    defineProps,
    defineExpose,
    defineEmits,
    watch,
} from "vue";

import { getTestList } from "@/view/plmProductSpec/components/commonFun.js";
import { getTestStandardDocumentList } from "@/api/confTestStandardDocument";

const router = new useRouter();
const route = new useRoute();

defineOptions({
    name: "testStandard",
});
const props = defineProps({
    productStylesData: { type: Object, default: {} },
    isEditing: { type: Boolean, default: false },
});

const testStandardData = ref([]); // 表格数据
const testStandardData1 = ref([]); // 表格数据
const testStandardDataLoading = ref(false);
// 测试标准选择
const multipleTableRef = ref();
const importTestShow = ref(false);
const testStandardDataSelected = ref([]);

function traverseTree(list, idx = 1) {
    if (!list) return;
    list.forEach((item, index) => {
        item["id"] = idx + "_" + index;
        if (item.children && item.children.length) {
            item["children"] = traverseTree(item.children, item["id"]);
        }
    });
    return list;
}

// 查询
const getTestStandardDocumentListFun = async () => {
    // console.log(" props.productStylesData", props.productStylesData);
    if (
        !props.productStylesData.cumstomerNum &&
        !props.productStylesData.customerBrand
    ) {
        // ElMessage({
        //     type: "error",
        //     offset: "25",
        //     message: "先选择款式编号再导入测试报告",
        // });
        ElNotification({
            title: "先选择款式编号再导入测试报告，客户编号和品牌缺少",
            type: "error",
            position: "bottom-left",
            customClass: "notification-item-err",
        });
        return;
    }
    testStandardDataLoading.value = true;
    const table = await getTestStandardDocumentList({
        // page: 1,
        // pageSize: 50,
        cumstomerNum: props.productStylesData.cumstomerNum, //客户
        brandNum: props.productStylesData.customerBrand, //品牌
        frameMaterial: props.productStylesData.frameMaterial, // 镜架材质
        frameCate: props.productStylesData.glassFrameCate, // 镜架类别
    });
    testStandardDataLoading.value = false;
    if (table.code === 0) {
        testStandardData.value = table.data.list;
        if (table.data.list.length == 0) {
            // ElMessage({
            //     type: "error",
            //     offset: "25",
            //     message: "暂未查询到相关标准",
            // });
            ElNotification({
                title: "暂未查询到相关标准",
                type: "error",
                position: "bottom-left",
                customClass: "notification-item-err",
            });
            return;
        } else if (table.data.list.length == 1) {
            testStandardData1.value = getTestList(
                JSON.parse(table.data.list[0].testDetails)
            );
        } else {
            importTestShow.value = true;
        }
    }
};

//尺码删除一行
const deleteRow = (index) => {
    ElMessageBox.confirm("确定要删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    }).then(() => {
        testStandardData1.value = [];
        importTestShow.value = false;
    });
};
// 获取测试标准选择列表
const testStandardDataSelect = (selection) => {
    if (selection.length > 1) {
        const del_row = selection.shift();
        // toggleRowSelection属性的第二个元素接受的是一个选中状态的布尔值，false不选中，true选中；
        // 注意直接使用element的table没有.element；multipleTableRef.value.toggleRowSelection(del_row, false)
        multipleTableRef.value.toggleRowSelection(del_row, false);
    }
};
// 已选择测试标准
const testStandardDataChange = (val) => {
    testStandardDataSelected.value = val;
};
// 添加测试标准
const addTestStandard = () => {
    testStandardData1.value = getTestList(
        JSON.parse(testStandardDataSelected.value[0].testDetails)
    );
    importTestShow.value = false;
};
const updateTestStandard = (val) => {
    testStandardData1.value = val;
};

// 款式编号改变清空所选测试标准
const updateTest = () => {
    testStandardData1.value = [];
};

defineExpose({ testStandardData1, updateTestStandard, updateTest });

onMounted(async () => {});
</script>

<style lang="scss" scoped>
.table-form {
    .el-form-item {
        margin-bottom: 0;
        width: 80%;
    }
}
.import-test {
    :deep(.el-table__header-wrapper .el-table__header .el-checkbox) {
        display: none;
    }
}
</style>